<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <style>
      *{margin:0;padding:0}
      #map{
        width:100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
	<div id="map" style="width: 100%;height:400px"></div>
	<div id="navigate-container">
		<input type="button" onClick="moveToLeft();" value="左移" />
		<input type="button" onClick="moveToRight();" value="右移" />
		<input type="button" onClick="moveToUp();" value="上移" />
		<input type="button" onClick="moveToDown();" value="下移" />
		<input type="button" onClick="moveToChengDu();" value="移到成都" />
		<input type="button" onClick="zoomIn();" value="放大" />
		<input type="button" onClick="zoomOut();" value="缩小" />
	</div>
	<script>
	  var map = new ol.Map({
			layers: [
				new ol.layer.Tile({source: new ol.source.OSM()})
			],
			view: new ol.View({
				// 设置成都为地图中心，此处进行坐标转换， 把EPSG:4326的坐标，转换为EPSG:3857坐标，因为ol默认使用的是EPSG:3857坐标
				center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
				zoom: 10
			}),
			target: 'map'
	  });
		
		// 向左移动地图
		function moveToLeft() {
			var view = map.getView();
			var mapCenter = view.getCenter();
			// 让地图中心的x值增加，即可使得地图向左移动，增加的值根据效果可自由设定
			mapCenter[0] += 50000;
			view.setCenter(mapCenter);
			map.render();
		}
		
		// 向右移动地图
		function moveToRight() {
			var view = map.getView();
			var mapCenter = view.getCenter();
			// 让地图中心的x值减少，即可使得地图向右移动，减少的值根据效果可自由设定
			mapCenter[0] -= 50000;
			view.setCenter(mapCenter);
			map.render();
		}
		
		// 向上移动地图
		function moveToUp() {
			var view = map.getView();
			var mapCenter = view.getCenter();
			// 让地图中心的y值减少，即可使得地图向上移动，减少的值根据效果可自由设定
			mapCenter[1] -= 50000;
			view.setCenter(mapCenter);
			map.render();
		}
		
		// 向下移动地图
		function moveToDown() {
			var view = map.getView();
			var mapCenter = view.getCenter();
			// 让地图中心的y值增加，即可使得地图向下移动，增加的值根据效果可自由设定
			mapCenter[1] += 50000;
			view.setCenter(mapCenter);
			map.render();
		}
		
		// 移动到成都
		function moveToChengDu() {
			var view = map.getView();
			// 设置地图中心为成都的坐标，即可让地图移动到成都
			view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));
			map.render();
		}
		
		// 放大地图
		function zoomIn() {
			var view = map.getView();
			// 让地图的zoom增加1，从而实现地图放大
			view.setZoom(view.getZoom() + 1);
		}
		
		// 缩小地图
		function zoomOut() {
			var view = map.getView();
			// 让地图的zoom减小1，从而实现地图缩小
			view.setZoom(view.getZoom() - 1);
		}
		
	</script>
</body>
</html>





